<template>
  <div>
    <van-search
      v-model="value"
      shape="round"
      background="#242424"
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    />
    <div style="margin-top: 1vw;">
      <div v-if="value">
        有值：{{ value }}
      </div>
      <div v-else>
        <van-empty description="请输入关键词">
          <van-button round type="dark" class="bottom-button" @click="onIndex">
            返回主页
          </van-button>
        </van-empty>
      </div>
    </div>
  </div>
</template>

<style>
  .bottom-button {
    width: 160px;
  }
</style>

<script>
export default {
  data() {
    return {
      value: null,
    };
  },
  methods: {
    // 搜索
    onSearch(val) {
      console.log(val);
    },
    // 删除，取消
    onCancel() {
      this.value = null;
    },
    // 返回主页
    onIndex() {
      this.$router.push({ path: '/m/index' });
    },
  },
};
</script>
